<template>
  <div>
    <div class="hz-footer">
      <div class="info-wrapper">
        <div class="phone-only" style="font-size: 12px; margin-bottom: 30px;">Copyright @浙江恒喆自动化. </div>
        <div class="QR-code"></div>
        <div class="footer-info">
          <span class="pc-only">
            <!-- 首页&#12288;|&#12288;关于我们&#12288;|&#12288;产品介绍&#12288;|&#12288;新闻资讯&#12288;|&#12288;客户服务&#12288;|&#12288;联系我们&#12288;|&#12288;在线留言 -->
            <router-link to='/homepage'>{{ $t('navbar.home') }}&#12288;|&#12288;</router-link>
            <router-link to='/company-profile'>{{ $t('navbar.introduction') }}&#12288;|&#12288;</router-link>
            <router-link to='/product-center/8'>{{ $t('navbar.product') }}&#12288;|&#12288;</router-link>
            <router-link to='/news-dynamic'>{{ $t('navbar.news') }}&#12288;|&#12288;</router-link>
            <router-link to='/service'>{{ $t('navbar.service') }}&#12288;|&#12288;</router-link>
            <router-link to='/contact-us'>{{ $t('navbar.contact') }}&#12288;|&#12288;</router-link>
            <router-link to='/message-board'>{{ $t('navbar.message') }}</router-link>    
          </span><br class="pc-only">
          <span class="pc-only">{{ $t('footer.copyright') }}</span><br class="pc-only">
          <span>{{ $t('contact.address') }}：{{ $t('footer.address') }}</span><br>
          <span>{{ $t('contact.phone') }}：400-6011109</span>
          <!-- <br><span>浙公网安备 33010602009788号</span> -->
        </div>
      </div>
    </div>
    <div style="width:100%;margin:0 auto; padding:2px 0;background-color: #000;text-align: center;">
      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602009788" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="../images/beian.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">浙公网安备 33010602009788号</p></a>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hz-footer',
    data() {
      return {

      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .hz-footer {
    position: relative;
    width: 100%;
    height: 235px;
    font-size: 14px;
    background-color: #339186;
    .info-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      color: #fff;
      .QR-code {
        display: inline-block;
        width: 130px;
        height: 130px;
        margin-right: 30px;
        background-image: url(~IMGS/QR-code.jpg);
        background-size: 100%;
      }
      .footer-info {
        display: inline-block;
        vertical-align: top;
        text-align: left;
        >span {
          display: inline-block;
          margin-bottom: 15px;
          >a {color: #fff;}
        }
      }
    }
    .On-xs({
      height: 180px;
      // padding: 0 30px;
      .info-wrapper {
        min-width: 100%;
        text-align: center;
        .QR-code {
          width: 75px;
          height: 75px;
          margin-right: 10px;
        }
        .footer-info {
          text-align: left;
          width: 240px;
          height: 75px;
          >span {
            margin-bottom: 0px;
            line-height: 24px;
            font-size: 12px;
          }
        }
      }
    });
  }
</style>